<template>
  <div class="content-wrapper">
    <div class="content-container">
      <el-form :inline="true" :model="listQuery" class="filter-container">
        <el-form-item label="状态">
          <el-select
            v-model="listQuery.status"
            size="mini"
            style="width: 120px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="搜索条件">
          <el-select
            v-model="listQuery.keywordField"
            size="mini"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option
              v-for="item in conditionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="listQuery.keyword"
            size="mini"
            style="width: 120px"
          />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="listQuery.datetimeRange"
            type="daterange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            size="mini"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            value="value"
            class="filter-item"
            size="small"
            round
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >
            搜索
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="listLoading"
        :data="list"
        highlight-current-row
        height="500"
      >
        <el-table-column
          label="状态"
          prop="status"
          width="100px"
          fixed="left"
        >
          <template slot-scope="{ row }">
            {{ formatByKeyValue(statusOptions, row.status) }}
          </template>
        </el-table-column>
        <el-table-column
          label="任务单号"
          prop="manufactureTaskCode"
          width="150px"
          fixed="left"
        />
        <el-table-column
          label="通知单号"
          prop="manufactureOrderCode"
          width="150px"
          fixed="left"
        />
        <el-table-column label="类型" width="100px" fixed="left">
          <template slot-scope="{ row }">
            {{ formatByKeyValue(orderTypeOptions, row.orderType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="生产人"
          prop="manufactureUserName"
          width="120px"
          fixed="left"
        />
        <el-table-column
          label="生产开始日期"
          prop="manufactureBeginDate"
          width="120px"
        />
        <el-table-column
          label="生产结束日期"
          prop="manufactureEndDate"
          width="120px"
        />
        <el-table-column label="备注" prop="memo" min-width="150px" />
        <el-table-column label="记录人" prop="recordUserName" width="100px" />
        <el-table-column label="记录时间" prop="recordTime" width="160px" />
        <el-table-column label="核查人" prop="checkUserName" width="100px" />
        <el-table-column label="核查时间" prop="checkTime" width="160px" />
        <el-table-column label="操作" align="center" width="80px" fixed="right">
          <template slot-scope="{ row }">
            <el-dropdown trigger="click" class="filter-item">
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown" class="user-dropdown">
                <el-dropdown-item @click.native="handleOpenAddEquipment(row)">
                  登记设备
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleOpenAddGoods(row)">
                  登记物料
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleOpenRecord(row)">
                  记录
                </el-dropdown-item>
                <el-dropdown-item @click.native="editDocument(row)">
                  核查
                </el-dropdown-item>
                <!-- <el-dropdown-item @click.native="pushProduction(row)"
                  >提交批生产记录</el-dropdown-item
                > -->
                <!-- <el-dropdown-item @click.native="handleViewOrder(row)">
                  物料清单
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleViewOrder(row)">
                  生产工艺
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleViewOrder(row)">
                  记录模板
                </el-dropdown-item> -->
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page-number.sync="listQuery.pageNumber"
        :page-size.sync="listQuery.pageSize"
        @pagination="getList"
      />
      <AddEquipment :visible.sync="equipmentDialogVisible" />
      <AddGoods :visible.sync="goodsDialogVisible" />
      <Record
        :visible.sync="recordDialogVisible"
        :current-task="currentRow"
      />
    </div>
  </div>
</template>

<script>
import {
  getBeginDay,
  getEndDay,
  getTimePickerShortcuts,
  formatByKeyValue
} from '@/utils'
import { pageManufactureTask, taskListPreOptions } from '@/api/mes/manufactureTask'

import Pagination from '@/components/Pagination'
import AddEquipment from './components/addEquipment.vue'
import AddGoods from './components/addGoods.vue'
import Record from './components/recordList.vue'

export default {
  components: { Pagination, AddEquipment, AddGoods, Record },
  data() {
    return {
      statusOptions: null,
      orderTypeOptions: null,
      conditionOptions: [
        { value: 'manufactureOrderCode', label: '生产订单号' },
        { value: 'manufactureTaskCode', label: '生产任务编号' }
      ],
      pickerOptions: {
        shortcuts: getTimePickerShortcuts()
      },
      listLoading: false,
      list: [{}],
      total: 0,
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        datetimeRange: []
      },
      equipmentDialogVisible: false,
      goodsDialogVisible: false,
      recordDialogVisible: false,
      currentRow: null
    }
  },
  mounted() {
    this.listQuery.datetimeRange.push(getBeginDay(0))
    this.listQuery.datetimeRange.push(getEndDay(0))
    taskListPreOptions().then((response) => {
      const data = response.data
      this.statusOptions = data.status
      this.orderTypeOptions = data.orderType
      this.getList()
    })
  },
  methods: {
    formatByKeyValue,
    handleOpenAddEquipment(row) {
      this.equipmentDialogVisible = true
    },
    handleOpenAddGoods(row) {
      this.goodsDialogVisible = true
    },
    handleOpenRecord(row) {
      this.currentRow = row
      this.recordDialogVisible = true
    },
    getList() {
      this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      pageManufactureTask(this.listQuery)
        .then((res) => {
          this.list = res.data.rows
          this.total = res.data.total
        })
        .finally(() => {
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.pageNumber = 1
      this.getList()
    }
  }
}
</script>
